<template>
  <div class="printPage">
    <section ref="print" class="bigPrintBox">
      <div class="printRow clearFloat" v-for="(item,index) in printArr" :key="index">
        <div class="leftFloat" :id="'qrcode' + index"></div>
        <ul class="rightFloat">
          <li>
            <span>PO: </span>
            <span>{{item.requestDetailDetailNo}}</span>
          </li>
          <li>
            <span>入库单: </span>
            <span>{{item.detailNo}}</span>
          </li>
          <li>
            <span>itemCode: </span>
            <span>{{item.itemCode}}</span>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>

  import pako from "pako";

  export default {
    name: 'PrintPage',
    data(){
      return {
        printArr: []
      }
    },
    methods:{
      createQrCode(){
        let arr = PF.JSON(this.printArr);
        for(let i=0;i<arr.length;i++){
          // let text = pako.deflate(JSON.stringify(arr[i]), { to: 'string' });
          let text = this.printArr[i].code = PF.codeProcess(arr[i]);
          $('#qrcode' + i).qrcode({
            render: 'canvas', // 渲染方式有table方式（IE兼容）和canvas方式
            width: 120, //宽度
            height: 120, //高度
            text: text, //内容
            typeNumber: -1,//计算模式
            correctLevel: 2,//二维码纠错级别
            background: "#ffffff",//背景颜色
            foreground: "#000000"  //二维码颜色
          });
        }
        window.print();
        // window.close();
        this.$router.go(-2);
      },
    },
    created() {
      let printArr = PF.JSON(this.$route.params.printArr);
      if(PF.isNull(printArr) && printArr.length > 0){
        this.printArr = printArr;
      }else{
        this.$router.go(-1);
      }
    },
    mounted() {
      this.createQrCode();
    }
  }
</script>

<style scoped lang="less">
  .printPage{
    .bigPrintBox{
      .printRow{
        border: 1px solid black;
        padding: 2px;
        page-break-after:always;
        .rightFloat{
          width: calc(100% - 120px);
          font-size: 12px;
        }
      }
    }
  }
</style>
